<template>
	<view>
		<navbar :config="config" backColor="#000"></navbar>
		<view class="page-content">

			<view class="text-box">
				<text class="text-title">地址</text>
				<view class="text-wrapper">
					<input inputmode="text" :value="addressXin" class="uni-input" type="text" placeholder="请输入地址"
						placeholder-class="placeClass" @input="getHandleAddress" disabled="disabled" />
				</view>

				<!-- 	<view class="text-wrapper">
				    <input inputmode="text"
					:value="'0xe6c0a0b3d80fe19b9ee5f8416d318826498eda00'"
					class="uni-input"
					type="text"
					placeholder="地址"
					@input="getHandleAddress"
					readonly/>
				</view> -->
				<!-- 				<view class="text-wrapper">
				    <input inputmode="text" :value="'0xe6c0a0b3d80fe19b9ee5f8416d318826498eda00'" class="uni-input" type="text" placeholder="地址" disabled="disabled"/>
				</view> -->

				<view class="text-divider"></view>
				<text class="text-title">兑换数量</text>
				<view class="text-wrapper unit-input">
					<input :style="Style" inputmode="decimal" :value="BNB_num" class="uni-input" type="digit"
						placeholder="最少100" @input="getHandleFee" placeholder-class="placeClass" />
					<text class="text-unit u-474747">消费额<span @click="getAllBNB"
							class="unit-input-button">全部兑换</span></text>
					<!-- 	<view class="text-unit u-474747">消费额<span @click="getAllBNB"
									class="unit-input-button">全部兑换</span></view> -->

				</view>
				<view class="cnhdView">可用 {{balance||0.00}} 消费额</view>

				<view class="cnhdInputView text-wrapper">
					<input inputmode="text" :value="userName" class="uni-input" type="text" placeholder="请输入姓名"
						@input="getUserName" style="width: 100%;"/>
				</view>
				<view class="cnhdInputView text-wrapper">
					<input inputmode="text" :value="cardNumber" class="uni-input" type="text" placeholder="请输入身份证号"
						@input="getCardNumber" />
				</view>
				<view class="cnhdInputView text-wrapper">
					<input inputmode="text" :value="phoneNumber" class="uni-input" type="number" placeholder="请输入银行预留手机号"
						@input="getPhoneNumber" />
				</view>




				<!-- 				<view class="text-wrapper">
				<input inputmode="text" :value="idNo" class="uni-input" type="number" placeholder="请输入银行卡号"
						@input="getIdNo"/>
				</view> -->

				<!--        <view class="unit-input" >
          <select v-model="selectedOption" placeholder="请选择银行卡" id="select">
            <option
                id="option"
                v-for="option in bankList"
                :key="option.id"
                :value="option"
            >
              {{ option.name }} - {{ option.province_code }}
            </option>
          </select>
        </view> -->

				<!-- <view>
		  <select v-model="idNo" id="select" @change="selectChange">
		    <option v-for="option in bankList" key="option.id"  value="option.province_code">
		      {{ option.province_code }}
		    </option>
		  </select>
		</view> -->

				<!-- <view style="margin:30rpx 0;color: #AAAAAA;" class="text-wrapper">
		    <select v-model="idNo" class="uni-select" @change="getIdNo">
		        <!-- <option value="" disabled selected>请选择姓名</option> 
		       <option v-for="option in bankList" :value="option.province_code">{{ option.province_code }}</option>
		        <!-- <option >111</option>
		        <option >222</option> 
		    </select>
		</view> -->

				<view v-if="bankList.length>0" class="text-wrapper">
					<!-- <text class="text-title">银行卡</text> -->
					<picker @change="bindPickerChange" :range="bankList" range-key="province_code">
						<view>银行卡：{{bankList[index].province_code}}<text></text>
						</view>
					</picker>
				</view>
				<view class="text-wrapper unit-input" style="margin-bottom: 153rpx;">
					手机号：{{userPhone}}
				</view>
				<!-- <view style="margin-top: 20rpx;font-size: 28rpx;color:#FF721B">手机号</view> -->
				<!-- <input type="text" style="margin:10px 0;color: #AAAAAA;" class="text-wrapper unit-input" placeholder="请输入手机号" v-model="userPhone"> -->

				<!-- 				<view class="text-wrapper unit-input">
					<view class="verification-item u-474747">
						验证码
					</view>
					<input class="verification_input" type="text" name="code" value=""
						placeholder-style="color:#AAAAAA; font-size:28rpx;" maxlength="6" @input="getVerfity_code"
						placeholder="请输入您的验证码" />
					<button class="verification-right active" :disabled="disabled" @click="sendVerfity_code">
						{{verificationCode}}
					</button>
				</view> -->

				<!-- 		<view class="des">
					*24小时兑换额度: 35353535/35353535 消费额
					*请勿直接兑换至众筹或ICO地址，否则将无法收到众筹或ICO发放的代币。
				</view> -->


				<view class="footer-wrapper">
					<view class="footer-content">
						<view class="footer-content-top">
							到账数量
							<view class="footer-content-top-view">
								<span style="margin:0 6rpx">{{real_amount||0.00}}</span><span>消费额</span>
							</view>
						</view>
						<!-- <view class="footer-content-num">
							
						</view> -->
						<view class="footer-content-bottom">
							到账手续费20% <span>{{handleFee||0.00}}</span> 消费额转为兑换券
						</view>
					</view>
					<view class="footer-button">
						<button @click="submit" >确认</button>
					</view>
				</view>
			</view>
		</view>
		<password-input @success="success" ref="passwordInput" :type="0" :resultNum="`$元`"></password-input>
	</view>
</template>

<script>
	import {
		accountAddress,
		transfer_net,
		accountIdentityAsset,
		handleFee,
		withdrawal,
		getVerfityCode
	} from '@/api/bnb.js'
	import passwordInput from '@/components/password-input.vue'
	export default {
		components: {
			passwordInput
		},
		data() {
			return {
				cardNumber: '', //身份证号
				phoneNumber: '', //银行卡预留手机号
				idNo: "",
				userName: '',
				user_id: 0,
				balance: 0.00,
				address: '0xe6c0a0b3d80fe19b9ee5f8416d318826498eda00',
				addressXin: '',
				BNB_num: '',
				verfity_code: '',
				mainNet: '',
				inputColor: '#000',
				handleFee: 0.00,
				real_amount: 0.00,
				hand_fee_cnhd: 0.00,
				integralable: 0, //可用积分
				index: 0,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '发送消费额',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},



				disabled: false,
				verificationCode: "发送验证码",
				time: 60,
				userPhone: null,
				bankList: [],
				bankData: '',
				// pointGiveAwayApi: {
				// 	url: '',
				// 	mode: 'post',
				// 	data: {
				// 		value: '',
				// 		user_obj_id: ''
				// 	}
				// },
			};
		},
		// onShow() {
		// 	this.getUserInfo()
		// 	this.params.page = 1;
		// 	this.pointsList = [];
		// 	this.getList();
		// },
		// //获取个人信息
		// getUserInfo() {
		// 	this.$http.get(getAccountInfo).then(res => {
		// 		if (res && res.code == 200) {
		// 			this.balance = res.data.balance;
		// 			uni.setStorageSync("personal", res.data)
		// 		} else {
		// 			this.isLogin = false
		// 		}
		// 	})
		// },
		mounted() {
			this.initPage()
			this.getUserInfo()
			this.getBankList()
			// 简写方式使用
		},
		computed: {
			Style() {
				return `height:${this.statusBarHeight}px`;
			}
		},
		methods: {
			// selectChange(){
			// 	console.log("bankid"+this.idNo)
			// },
			getBankList() {
				let that = this
				this.$http.get('/userbank/list').then(res => {
					console.log('userbanklist', res)
					if (res.code == 200) {
						that.bankList = res.list
						that.idNo = res.list[that.index].province_code
					}
				})
			},

			getUserInfo() {

				this.$http.get("/account/app-info").then(res => {
					if (res && res.code == 200) {
						console.log(res.data.mobile)
						this.userPhone = res.data.mobile
					}


				})
			},
			async initPage() {
				// const res1 = await this.$http.get(accountAddress)
				const res2 = await this.$http.get(accountIdentityAsset)
				const res3 = await this.$http.get(transfer_net)
				// this.address = res1.data.account_address
				this.balance = res2.data.balance
				this.user_id = res2.data.id
				this.mainNet = res3.data[0].value

				// 	const qrcode = new QRCode("qrcode", this.address);
				// console.log(res1, res2)
			},
			getVerfity_code(val) {
				this.verfity_code = val.detail.value
			},
			sendVerfity_code() {
				this.$http.post('/common/account/getVerfityCode', this.userPhone).then(res => {
					console.log(res)
					if (res && res.code == 200) {
						this.disabled = true;
						this.verificationCode = this.time + "s";
						this.clear = setInterval(this.countDown, 1000);
					}
				})
			},
			bindPickerChange: function(e) {
				console.log(e);
				this.index = e.detail.value
				this.idNo = this.bankList[e.detail.value].province_code
				console.log(this.idNo);
				console.log(this.index)
			},
			async success(psd) {

				const params = {
					"to_address": this.address,
					"amount": this.BNB_num,
					"pay_type": 0,
					"transfer_net": 0,
					"verfity_code": this.verfity_code,
					"pay_password": psd,
					"uid": this.user_id,
					"user_name": this.userName,
					"id_no": this.idNo,
					"user_phone": this.userPhone,
					"identity_card": this.cardNumber, //身份证号
					"bank_phone": this.phoneNumber, //银行卡预留手机号
				}
				uni.showLoading({
					title: '加载中'
				});
				const {
					code
				} = await this.$http.post('/pointtobalace/pointtobalacecnhd/withdrawal/balance',

					params
				)

				uni.hideLoading()
				if (code === 200) {

					uni.showToast({
						title: '申请兑换成功',
					})

					setTimeout(() => {
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					}, 1200)
				}
				console.log('succ', psd)
			},
			openHintPopup() {
				// this.pointGiveAwayApi.data = {
				// 	value: this.value
				// }
				this.$refs.passwordInput.open()
				// this.$refs.exchangeHint.open()
			},
			getDetail(info) {
				uni.showModal({
					content: info, //模板中提示的内容
					confirmText: '复制内容',
					success: (res) => { //点击复制内容的后调函数
						if (res.confirm) {
							let result
							// #ifndef H5
							//uni.setClipboardData方法就是讲内容复制到粘贴板
							uni.setClipboardData({
								data: info, //要被复制的内容
								success: () => { //复制成功的回调函数
									uni.showToast({ //提示
										title: '复制成功'
									})
								}
							});
							// #endif

							// #ifdef H5
							let textarea = document.createElement("textarea")
							textarea.value = info
							textarea.readOnly = "readOnly"
							document.body.appendChild(textarea)
							textarea.select() // 选中文本内容
							textarea.setSelectionRange(0, info.length)
							uni.showToast({ //提示
								title: '复制成功'
							})
							result = document.execCommand("copy")
							textarea.remove()
							// #endif
						} else {
							console.log('取消')
						}
					}
				});
			},
			getAllBNB() {
				this.BNB_num = this.balance
			},
			getHandleAddress(val) {
				this.address = val.detail.value
			},
			getUserName(val) {
				this.userName = val.detail.value
			},
			getCardNumber(val) {
				this.cardNumber = val.detail.value
			},
			getPhoneNumber(val) {
				this.phoneNumber = val.detail.value
			},

			// getIdNo() {
			// 	console.log(this.idNo)
			// 	 if (this.bankList) {
			// 	             let filteredList = this.bankList.filter(option => option.province_code === this.idNo);
			// 	             console.log(filteredList);
			// 	         }
			// },
			async getHandleFee(val) {
				this.inputColor = '#000'
				const number = val.detail.value
				if (!this.checkNumber(number)) {
					this.inputColor = '#f5222d'
					this.handleFee = 0.00
					return
				}
				if (!number) {
					this.handleFee = 0.00
					return
				}
				const url = handleFee + '/' + number
				console.log(val.detail.value, url)
				this.BNB_num = number
				const res1 = await this.$http.get(url)
				this.real_amount = res1.data.real_amount_cnhd
				this.handleFee = res1.data.hand_fee_cnhd
				console.log(res1)
			},

			checkNumber(val) {
				if (val > this.balance) {

					return false
				} else {
					return true
				}
			},

			countDown() {
				if (this.time <= 0) {
					this.disabled = false;
					this.verificationCode = "重新获取";
					this.isPhone = true;
					this.time = 60;
					clearInterval(this.clear)
				} else {
					--this.time;
					this.verificationCode = this.time + 's'
				}
			},
			async submit() {

				// console.log("this.selectedOption",this.selectedOption)
				// this.userName = this.selectedOption.name
				// this.idNo = this.selectedOption.province_code
				// this.userPhone = this.selectedOption.phone

				// debugger
				if (!this.address) {
					this.$mUtil.toast("请输入地址")
					return
				}
				if (!this.userName) {
					this.$mUtil.toast("请输入姓名")
					return
				}
				if (!this.cardNumber) {
					this.$mUtil.toast("请输入身份证号")
					return
				}


				if (!this.phoneNumber) {
					this.$mUtil.toast("请输入银行卡预留手机号")
					return
				}


				// cardNumber:'',//身份证号
				// phoneNumber:'',//银行卡预留手机号


				// if (!this.idNo) {
				// 	this.$mUtil.toast("请输入银行卡号")
				// 	return
				// }
				// if (this.idNo.length < 16 || this.idNo.length > 19) {
				//     this.$mUtil.toast("银行卡号长度应在" + 16 + "到" + 19 + "位之间");
				//     return;
				// }
				// if (!this.selectedOption) {
				// 	this.$mUtil.toast("请输入银行卡号")
				// 	return
				// }
				console.log('submit', this.BNB_num)
				console.log(this.idNo)
				console.log(1111)
				// if ((!this.BNB_num || !this.checkNumber(this.BNB_num)) || this.BNB_num <100) {
				// 	uni.showToast({
				// 		title: '数量最少为100',
				// 		icon: 'error',
				// 	})
				// 	return
				// }



				if (this.idNo == '') {
					this.$mUtil.toast("请去绑定银行卡")
					return
				}


				this.openHintPopup()

			}
		}
	}
</script>

<style lang="scss" scoped>
	#select {
		width: 100%;
		height: 90rpx;
		padding: 22rpx 20rpx;
		margin: 10rpx 0;
		border-radius: 20rpx;
		background-color: #fff;
		border: 1rpx solid #AAAAAA;
	}

	#select option {
		/* 字体大小 */
		font-size: 14px;
		/* 背景颜色 */
		background-color: #fff;
		/* 字体颜色 */
		color: #333;
	}

	.custom-select {
		width: 200px;
		/* 设置下拉菜单的宽度 */
	}

	.page-content {
		// height: 100vh;
		display: flex;
		flex-direction: column;
		// background-color: #f5f5f5;
		align-items: center;
	}

	.text-box {
		border-radius: 19rpx;
		width: 712rpx;
		height: auto;
		background: #FFFFFF;
		padding: 38rpx;
		box-sizing: border-box;
		margin-top: 19rpx;

		.text-title {
			font-weight: 600;
			font-size: 31rpx;
			color: #333333;
			line-height: 31rpx;
		}

		/deep/.uni-input-input {
			color: #AAAAAA !important;
		}

		.unit-input {
			display: flex;
			justify-content: space-between;
			align-items: center;


			&-button {
				color: #3d93fc;
				margin-left: 20rpx;
			}
		}


		.text-wrapper1 {
			width: 100%;
			height: 90rpx;
			padding: 22rpx 20rpx;
			margin: 10rpx 0;
			border-radius: 20rpx;
			background-color: #fff;
			border: 1rpx solid #AAAAAA;

			.input_value {
				font-weight: normal;
				color: #B2B2B2;
			}

			.text-unit {}

			.unit-input-button {
				color: #FF211F;
				padding-right: 19rpx;
			}
		}


		.text-divider {
			margin: 30rpx 0;
		}
	}

	.des {
		margin: 40rpx 0;
		color: #AAAAAA
	}

	.footer-wrapper {
		width: 635rpx;
		color: #474747;
		display: flex;
		flex-direction: column;
		align-items: end;
		justify-content: space-between;
		// position: absolute;
		// bottom: 100rpx;

		.footer-content {
			display: flex;
			width: 635rpx;
			height: auto;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			&-num {
				color: #FF721B;
				font-size: 28rpx;
				margin: 12rpx 0;

				span:first-child {
					margin-right: 10rpx;
					font-size: 48rpx;
				}
			}
		}

		.footer-content-top {
			font-weight: 500;
			font-size: 29rpx;
			color: #333333;
			line-height: 34rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 13rpx;
		}

		.footer-content-top-view {
			font-weight: 500;
			font-size: 29rpx;
			color: #FF211F;
			line-height: 34rpx;
		}

		.footer-button {
			width: 635rpx;
			height: 85rpx;
			background: #FF211F;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			font-weight: 500;
			font-size: 29rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-top: 57rpx;
			button{
				font-weight: 500;
				font-size: 29rpx;
				color: #FFFFFF;
				line-height: 34rpx;
			}

			.mini-btn {
				// flex-shrink: 0;
				// background-color: #FF721B;
				// border-radius: 20rpx;
				// height: 80rpx;
				// line-height: 80rpx;
			}
		}
	}

	.usable-btn {
		width: 80%;
		height: 90rpx;
		background: #3d93fc;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		line-height: 90rpx;
		margin-top: 158rpx;
	}

	.verification_input {
		flex: 1;
		margin-left: 88rpx;
	}

	.verification-right {
		font-size: 24rpx;

		// background-color: #3775F6;
		color: #FF721B;
		font-weight: 400;
		border: 1rpx solid #FF721B;
		border-radius: 36rpx;
		padding: 0 10px;
	}

	.placeClass {
		font-weight: 400;
		font-size: 29rpx;
		color: #999999;
	}

	.cnhdView {
		font-weight: 400;
		font-size: 25rpx;
		color: #FF211F;
		line-height: 27rpx;
		margin-top: 19rpx;
	}

	.text-wrapper {
		width: 635rpx;
		height: 96rpx;
		background: #F9F9F9;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		// padding-top: 35rpx;
		// padding-bottom: 35rpx;
		padding-left: 19rpx;
		margin-top: 19rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.input_value {
			font-weight: normal;
			color: #B2B2B2;
		}

		.text-unit {}

		.unit-input-button {
			color: #FF211F;
			padding-right: 19rpx;
		}
	}

	.footer-content-bottom {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		line-height: 25rpx;
	}

	.footer-content-bottom span {
		margin: 0 4rpx;
	}
	/deep/.uni-picker-action-confirm{
		color:#FF211F !important;
	}
	.uni-picker-action-confirm{
		color:#FF211F !important;
	}
</style>